import { SwitchContext } from "@/focusSolid/store/switch";
import { BoxContext, getBoxContext } from "@/focusSolid/store/box";
import { onMount, onCleanup, JSX, useContext } from "solid-js";
import { SolidFC } from "solid-shims";

const Index: SolidFC<JSX.HTMLAttributes<HTMLDivElement>> = function (props) {
  const [boxState, boxOptions] = getBoxContext()
  const [_, switchOptions] = useContext(SwitchContext);
  let domEle: HTMLDivElement

  onMount(() => {
    switchOptions.boxChange({
      uid: boxState.uid,
      ele: domEle,
      rect: domEle ? domEle.getBoundingClientRect() : undefined,
    })
  })
  onCleanup(() => {
    switchOptions.boxChange(boxState.uid)
  })
  return <BoxContext.Provider value={[boxState, boxOptions]}>
    <div {...props} ref={e => domEle = e}>{props.children}</div>
  </BoxContext.Provider>
}

export default Index